<template>
    <div class="contentBox">
        <van-nav-bar placeholder class="vantTopNav" @click-left="$router.push('/')">
            <template #left>
                <van-icon name="arrow-left" size="18" color="#fff" />
            </template>
            <template #right>
                <van-icon name="ellipsis" size="18" color="#fff" />
            </template>
        </van-nav-bar>
        <div class="content-box">
            <div class="title">{{data.title}}</div>
            <div class="author-box">
                <img :src="data.aut_photo" />
                <div class="author-msg">
                    <div>{{data.aut_name}}</div>
                    <div>{{dealWithTime(data.pubdate)}}</div>
                </div>
                <van-button round type="info" @click="follow">{{data.is_followed ? '取消关注':'＋关注'}}
                </van-button>
            </div>
            <div class="content" v-html="data.content" ref="content" />
            <!-- <div class="recomments" v-if="data.recomments == []">
                猜你喜欢：
            </div> -->
        </div>
        <div class="likeOrNot">
            <van-icon name="good-job-o" @click="like">{{data.attitude == 1 ? '已点赞':'点赞'}}</van-icon>
            <van-icon name="delete" color="#e2292a" @click="disLike">{{data.attitude == 0 ? '已踩':'不喜欢'}}</van-icon>
        </div>
        <div class="commentBox" v-if="comment_total !== 0">
            <div class="comment" v-for="(item, index) in comment" :key="index">
                <img :src="item.aut_photo">
                <div class="comment-msg">
                    <div class="comment-msg-top">
                        <div class="comment-author">{{item.aut_name}}</div>
                        <div class="comment-agree" :style="item.is_liking?'color:red':''" @click="likeComment(item)">
                            <van-icon name="good-job-o" />
                            <span>{{item.like_count}}</span>
                        </div>
                    </div>
                    <div class="comment-msg-main">
                        {{item.content}}
                    </div>
                    <div class="comment-msg-bottom">
                        <div class="pubdate">{{new Date(item.pubdate).toLocaleString()}}</div>
                        <div class="c-comment">
                            {{item.reply_count}}回复
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-box"></div>
        <div class="bottomArea">
            <div class="writeComment" @click="show = true,commentValue=''">写评论</div>
            <van-icon name="chat-o" :badge="comment_total" />
            <van-icon name="star-o" />
            <van-icon name="bullhorn-o" />
        </div>
        <van-action-sheet v-model="show" title="评论">
            <textarea class="commentInput" type="text" v-model="commentValue" placeholder="献上你的一条热评" />
            <van-button @click="addComment" class="sendCommentBtn" :disabled="commentValue.length == 0" type="primary">发送</van-button>
        </van-action-sheet>
    </div>
</template>

<script>
    import {
        ImagePreview
    } from 'vant';
    export default {
        data() {
            return {
                data: {},
                commentValue: '',
                comment: [],
                comment_total: 0,
                show: false
            }
        },
        methods: {
            // 获取文章详情
            async getDataById() {
                let id = this.$route.query.id
                let {
                    data: res
                } = await this.$http.get('/articles/' + id)
                if (res.message == 'OK') {
                    this.data = res.data
                }
            },
            // 关注/取关
            async follow() {
                if (this.data.is_followed) {
                    // 取关
                    try {
                        this.$http.delete('/user/followings/' + this.data.aut_id)
                        this.data.is_followed = false
                    } catch (error) {
                        console.log(error)
                    }
                } else {
                    // 关注
                    let {
                        data: res
                    } = await this.$http.post('/user/followings', {
                        target: this.data.aut_id
                    })
                    if (res.message == 'OK') {
                        this.data.is_followed = true
                    }
                }
            },
            // 处理时间
            dealWithTime(time) {
                let targetTime = new Date(time)
                let nowTime = new Date()
                if (nowTime.getFullYear() - targetTime.getFullYear() >= 1) {
                    return `${nowTime.getFullYear() - targetTime.getFullYear()}年前`
                } else if (nowTime.getMonth() - targetTime.getMonth() >= 1) {
                    return `${nowTime.getMonth() - targetTime.getMonth()}月前`
                } else if (nowTime.getDate() - targetTime.getDate() >= 1) {
                    return `${nowTime.getDate() - targetTime.getDate()}天前`
                } else if (nowTime.getHours() - targetTime.getHours() >= 1) {
                    return `${nowTime.getDate() - targetTime.getDate()}小时前`
                } else if (nowTime.getMinutes() - targetTime.getMinutes() >= 1) {
                    return `${nowTime.getMinutes() - targetTime.getMinutes()}分钟前`
                } else {
                    return '刚刚'
                }
            },
            // 点赞文章
            async like() {
                // 如果已经点过赞了，则取消点赞
                if (this.data.attitude == 1) {
                    let res = await this.$http.delete('/article/likings/' + this.$route.query.id)
                    if (res.status == 204) {
                        this.data.attitude = -1
                    }
                }
                // 如果没有点过赞，则点赞
                else {
                    let {
                        data: res
                    } = await this.$http.post('/article/likings', {
                        target: this.$route.query.id
                    })
                    if (res.message == "OK") {
                        this.data.attitude = 1
                    }
                }
            },
            // 不喜欢文章
            async disLike() {
                // 如果已经点过踩了，则取消踩
                if (this.data.attitude == 0) {
                    let res = await this.$http.delete('/article/dislikes/' + this.$route.query.id)
                    if (res.status == 204) {
                        this.data.attitude = -1
                    }
                }
                // 如果没有点过踩，则点踩
                else {
                    let {
                        data: res
                    } = await this.$http.post('/article/dislikes', {
                        target: this.$route.query.id
                    })
                    if (res.message == "OK") {
                        this.data.attitude = 0
                    }
                }
            },
            // 获取评论数据
            async getComments() {
                let {
                    data: res
                } = await this.$http.get('/comments', {
                    params: {
                        type: 'a',
                        source: this.$route.query.id
                    }
                })
                if (res.message == 'OK') {
                    this.comment_total = res.data.total_count
                    this.comment = res.data.results
                }
            },
            // 点赞评论
            async likeComment(item) {
                // 已经点了赞，再点即是取消点赞
                if (item.is_liking) {
                    let data = await this.$http.delete('/comment/likings/' + item.com_id)
                    if (data.status == 204) {
                        item.is_liking = !item.is_liking
                        item.like_count--
                    }
                }
                // 点赞
                else {
                    let {
                        data: res
                    } = await this.$http.post('/comment/likings', {
                        target: item.com_id
                    })
                    if (res.message == 'OK') {
                        item.is_liking = !item.is_liking
                        item.like_count++
                    }
                }
            },
            // 评论文章
            async addComment() {
                // 发送评论请求
                let {data:res}= await this.$http.post('/comments',{
                    target:this.$route.query.id,
                    content:this.commentValue
                })
                // 成功后关闭弹出框，清空表单数据，并重新获取评论数据
                if(res.message == 'OK'){
                    this.show = false
                    this.commentValue = ''
                    this.getComments()
                }
            }
        },
        mounted() {
            // 获取文章详情信息
            this.getDataById()
            // 获取文章评论信息
            this.getComments()
            // 点击内容中的图片时，显示放大的图
            this.$refs.content.onclick = function (e) {
                if (e.target.tagName == 'IMG') {
                    ImagePreview([e.target.src])
                }
            }
        }
    }
</script>

<style lang="scss">
    .contentBox {

        .vantTopNav {
            background-color: #3296fa;
            color: #fff;
        }

        .content-box {
            padding: 12px 20px;

            .title {
                font-size: 20px;
                letter-spacing: 1px;
                color: #3a3a3a;
                font-weight: bold;
            }

            .author-box {
                display: flex;
                align-items: center;
                font-size: 14px;
                margin: 15px 0;

                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                }

                .author-msg {
                    margin-left: 10px;
                }

                .van-button {
                    width: 95px;
                    height: 29px;
                    margin-left: auto;
                    letter-spacing: 1px;
                }
            }

            .content {
                max-width: 100%;
                font-size: 18px;

                img {
                    width: 100%;
                }
            }
        }

        .likeOrNot {
            display: flex;
            align-items: center;
            width: 50%;
            margin: 0px auto;
            margin-bottom: 26px;

            .van-icon {
                width: 78px;
                height: 29px;
                border-radius: 15px;
                border: 1px solid #ccc;
                font-size: 15px;
                display: flex;
                align-items: center;
                justify-content: center;

                &:first-child {
                    margin-right: 14px;
                }
            }
        }

        .van-action-sheet__content {
            .commentBox {
                margin-top: 0;
            }
        }

        .commentBox {
            margin-top: 40px;
            padding: 12px 20px;

            .comment {
                margin-top: 10px;
                display: flex;
                align-items: flex-start;

                img {
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                }

                .comment-msg {
                    margin-left: 15px;
                    width: 100%;

                    .comment-msg-top {
                        width: 100%;
                        display: flex;
                        align-items: center;

                        .comment-author {
                            color: #5e7da9;
                            font-size: 15px;
                        }

                        .comment-agree {
                            display: flex;
                            align-items: center;
                            margin-left: auto;
                            font-size: 16px;
                        }
                    }

                    .comment-msg-main {
                        font-size: 16px;
                        margin-top: 6px;

                    }

                    .comment-msg-bottom {
                        margin-top: 5px;
                        font-size: 14px;
                        display: flex;
                        align-items: center;

                        .c-comment {
                            margin-left: 10px;
                            width: 70px;
                            height: 23px;
                            border-radius: 20px;
                            background-color: #f4f5f6;
                            text-align: center;
                            line-height: 23px;
                        }
                    }
                }
            }
        }

        .bottomArea {
            width: 100%;
            height: 34px;
            padding: 12px 20px;
            display: flex;
            align-items: center;
            position: fixed;
            left: 0;
            bottom: 0;
            background-color: #fff;
            border-top: 1px solid #eee;

            .writeComment {
                width: 200px;
                height: 32px;
                border-radius: 16px;
                border: 1px solid #eee;
                font-size: 15px;
                text-indent: 14px;
                line-height: 32px;
            }

            .van-icon {
                margin: 0px 13px;
            }
        }

        .bottom-box {
            height: 59px;
        }
        .commentInput {
            margin: 0px auto;
            width: 95%;
            display: block;
            font-size: 15px;
        }
        .sendCommentBtn {
            margin: 15px auto;
            width: 97%;
            height: 30px;
            display: block;
        }
    }
</style>